<template>
	<view class="u-content">
		<view class="top">
			<view class="search">
				<image src="../../static/search.png" mode=""></image>
				<input type="text" v-model="keyWord" value="" placeholder="搜索需要办理的事项名称" @confirm="serviceCsList"></input>
				<view class="btn" @click="serviceCsList">
					搜索
				</view>
			</view>
		</view>
		<view class="list">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="lower" scroll-y>
				<view class="adminlist" v-for="(item,index) in adminList" :key="index"
					@click="goDetails(item.code,item.isTreeLeaf,index)">
					<view style="position: relative;" @click="change,curClickIndex=index">
						<view class="text">
							<u-parse :html="item.name" use-cache></u-parse>
						</view>
						<image class="image1" src="../../static/xiasanjiao.png" mode=""
							v-if="imageShow && curClickIndex==index && item.isTreeLeaf==0&&isTreeLeaf"></image>
						<image class="image2" src="../../static/back.png" mode="" v-else></image>
					</view>
					<view style="position: relative;" v-if="item.isTreeLeaf==0 && isTreeLeaf && isTreeIndex == index"
						v-for="(item1,index1) in ciAdminList" :key="index" @click="goDetails1(item1.code)">
						<!-- <view style="position: relative;" v-if="item.isTreeLeaf==0&&isTreeLeaf"> -->
						<view class="affle">
							{{item1.name}}
						</view>
						<image class="image2" src="../../static/back.png" mode=""></image>
					</view>
				</view>
				<u-empty v-if="adminList.length==0 && status=='noMore'"
					style="text-align: center;color: #fff;margin-top: 40%;" text="暂无数据" mode="list"></u-empty>
				<uni-load-more :status="status" v-if="adminList.length > 0"></uni-load-more>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adminList: [],
				ciAdminList: [],
				status: 'more',
				pageNum: 1,
				type: '',
				isTreeLeaf: false, // 是否展开二级的判断
				isTreeIndex:0,
				imageShow: true, // 是否显示图片
				folderCode: '',
				curClickIndex: -1, //当前的序号
				pageSize: 15,
				keyWord:''
			}
		},
		watch:{
			keyWord(newVal,oldVal){
				if((/^\s*$/.test(newVal))){
					this.adminList = [];
					this.pageNum = 1;
					this.status = 'more';
					this.getFolderList();
				}
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.title
			});
			this.type = options.type
			this.getFolderList()
		},
		methods: {
			serviceCsList(){
				this.pageNum = 1;
				this.adminList = [];
				this.getFolderList();
			},
			// 箭头切换
			change() {
				this.imageShow = !this.imageShow
				console.log(this.imageShow)
			},
			// 一级条例跳转判断
			goDetails(code, isTreeLeaf,index) {
				this.folderCode = code
				console.log(code)
				if (isTreeLeaf == 0) {
					this.isTreeIndex = index;
					this.ciAdminList = [];
					if (this.isTreeLeaf) {
						this.isTreeLeaf = false
					} else {
						this.isTreeLeaf = true
						this.getFolderList1()
					}
				} else {
					this.$gopage('/pages/matter/details?folderCode=' + code)
				}
			},
			// 二级跳转
			goDetails1(code) {
				this.$gopage('/pages/matter/details?folderCode=' + code)
			},
			lower() {
				if (this.status === 'noMore') {
					return;
				}
				this.pageNum++;
				this.getFolderList();
			},
			getFolderList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.status = 'loading';
				this.$ajax({
					url: '/api/wwwBiz/getFolderList',
					noErrorMsg: true,
					method: 'POST',
					data: {
						type: this.type,
						folderTreeLevel: 0,
						pageSize: this.pageSize,
						pageNum: this.pageNum,
						keyWord:this.keyWord
					}
				}).then(res => {
					var data = res.data.records;
					if (data.length === 0 && this.adminList.length === 0) {
						this.loadmoreShow = false;
						this.status = 'noMore';
					} else if (this.pageNum < Math.ceil(res.data.total / this.pageSize)) {
						this.loadmoreShow = true;
						this.status = 'more';
					} else {
						this.loadmoreShow = true;
						this.status = 'noMore';
					}
					this.adminList = this.adminList.concat(data);
				}).finally(() => {
					uni.hideLoading();
				})

			},
			getFolderList1() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$ajax({
					url: '/api/wwwBiz/getFolderList',
					noErrorMsg: true,
					method: 'POST',
					data: {
						type: this.type,
						folderTreeCode: this.folderCode
					}
				}).then(res => {
					if(res.code == 200){
						this.ciAdminList = res.data.records;
					}
				}).finally(() => {
					uni.hideLoading();
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	image {
		width: 6rpx;
		height: 36rpx;
	}

	.u-content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		
		.top {
			width: 100%;
			height: 108rpx;
			border-bottom: 1rpx solid #eeeeee;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		
			.search {
				box-sizing: border-box;
				padding: 20rpx auto;
				background-color: #eeeeee;
				height: 74rpx;
				margin: 0 auto;
				border-radius: 40rpx;
				display: flex;
				position: relative;
				display: flex;
				align-items: center;
		
				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
				}
		
				input {
					width: 420rpx;
					height: 50rpx;
					font-size: 24rpx;
					padding-right: 30rpx;
				}
		
				.btn {
					font-size: 28rpx;
					letter-spacing: 0;
					color: #ffffff;
					width: 140rpx;
					height: 74rpx;
					background-color: #5b96ff;
					border-radius: 0rpx 40rpx 40rpx 0rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.list{
			flex: 1;
			overflow: hidden;
			.adminlist {
			
				// display: flex;
				// align-items: center;
				>view {
					padding: 30rpx 0;
					margin: 0 30rpx;
					border-bottom: 1rpx solid #f1f1f1;
					display: flex;
				}
			
				.text {
					width: 600rpx;
					font-size: 32rpx;
					letter-spacing: 0rpx;
					color: #333333;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			
				.image1 {
					position: absolute;
					right: 30rpx;
					width: 26rpx;
					height: 16rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			
				.image2 {
					position: absolute;
					right: 30rpx;
					width: 16rpx;
					height: 26rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			
				.affle {
					width: 560rpx;
					height: 85rpx;
					font-size: 32rpx;
					line-height: 85rpx;
					letter-spacing: 0rpx;
					color: #333333;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					position: relative;
					padding-left: 20rpx;
				}
			
				.affle::before {
					content: '';
					position: absolute;
					top: 50%;
					width: 6rpx;
					height: 36rpx;
					display: inline-block;
					background-color: #007AFF;
					transform: translateY(-18rpx);
					left: 0;
				}
			}
		}
	}
</style>
